<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-row :gutter="20" class="mb10" style="margin-bottom: 10px">
      <el-col :span="6">
        <el-input
          v-model="searchParams.phone"
          placeholder="请输入手机号"
          clearable
          @clear="handleSearch"
        />
      </el-col>
      <el-col :span="18" class="text-right">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-table :data="tableData" border v-loading="loading" size="mini">
      <el-table-column type="index" />
      <el-table-column prop="username" label="用户名" width="150" />
      <el-table-column prop="industry" label="行业" width="150" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column prop="openId" label="OpenID" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="region" label="属地" />
      <el-table-column label="最近登录" width="150">
        <template slot-scope="scope">
          {{ formatTime(scope.row.loginTime) }}
        </template>
      </el-table-column>
      <el-table-column label="注册时间" width="150">
        <template slot-scope="scope">
          {{ formatTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.delFlag === 0 ? 'success' : 'danger'">
            {{ scope.row.delFlag === 0 ? '正常' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="small" plain type="primary" @click="handleDetail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增会员详情弹窗 -->
    <el-dialog
      title="会员详情"
      :visible.sync="dialogVisible"
      width="600px"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="detail-item"><label>用户名：</label>{{ detailData.username }}</div>
          <div class="detail-item"><label>OpenID：</label>{{ detailData.openId }}</div>
          <div class="detail-item"><label>行业：</label>{{ detailData.industry }}</div>
          <div class="detail-item"><label>手机号：</label>{{ detailData.phone }}</div>
        </el-col>
        <el-col :span="12">
          <div class="detail-item"><label>邮箱：</label>{{ detailData.email || '-' }}</div>
          <div class="detail-item"><label>属地：</label>{{ detailData.region }}</div>
          <div class="detail-item"><label>最近登录：</label>{{ formatTime(detailData.loginTime) }}</div>
          <div class="detail-item"><label>状态：</label>
            <el-tag :type="detailData.delFlag === 0 ? 'success' : 'danger'" size="mini">
              {{ detailData.delFlag === 0 ? '正常' : '禁用' }}
            </el-tag>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {getMemberList, getMemberDetail} from '@/api/index'
export default {
  name: 'Members',
  data() {
    return {
      loading: false,
      searchParams: {
        phone: "",
        pageNum: 1,
        count: 999
      },
      tableData: [],
      dialogVisible: false,    // 控制弹窗显示
      detailData: {},         // 会员详情数据
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    formatTime(timestamp) {
      return timestamp ? new Date(timestamp).toLocaleString() : '-'
    },
    async fetchData() {
      this.loading = true
      getMemberList(this.searchParams).then(res => {
        this.tableData = res.list
        this.loading = false
      })
    },
    handleSearch() {
      this.fetchData()
    },
    async handleDetail(row) {
      this.dialogVisible = true
      getMemberDetail({id: row.id}).then(res => {
        this.detailData = res
      })
    }
  }
}
</script>

<style scoped>
.el-tag {
  margin: 2px;
}
.detail-item {
  margin: 12px 0;
  line-height: 1.8;
}
.detail-item label {
  display: inline-block;
  width: 80px;
  color: #666;
  font-weight: bold;
}
</style>